<template>
  <view class="content">
    <!-- <searchInput /> -->
    <view>
      <!-- <img src="../../static/test.jpg" width="100%"> -->
      <navigator url="/pages/index/list?type=pdf" open-type="navigate">
        <image src='../../static/banner.png' class="u-headImg" />
      </navigator>
    </view>
    <view class="news-state">
      <view class="flex-item item1">
        <image src='../../static/news-icon.png' class="u-newsImg" />
      </view>
      <view class="flex-item item2">

      </view>
    </view>


    <!-- <swiperBox :abc="list" /> -->
    <image src="../../static/echart-icon.png" class="u-guest-echart" />
    <view class="g-section">
      <view class="m-sectionTtitle">
        <image src="../../static/guest.png" class="u-guest" />
        <text class="u-sectionName">大咖说事</text>
        <navigator url="/pages/index/list?type=people" hover-class="navigator-hover" class="u-sectionMore">
          更多>
        </navigator>

      </view>
      <view class="m-guest" v-for='(i,index) in peopleArr' v-if="index < 4">
        <image :src='i.img' class="u-guestImg" />
        <text class="u-guestName">{{i.name}}</text>
        <text class="u-guestPostion">{{i.job}}</text>
      </view>
    </view>
    <view class="g-section">
      <view class="m-sectionTtitle">
        <image src="../../static/icon100.png" class="u-guest" />
        <text class="u-sectionName">入驻机构</text>
        <navigator url="/pages/index/list?type=institution" hover-class="navigator-hover" class="u-sectionMore">
          更多>
        </navigator>

      </view>
      <view class="m-newsList m-institution" v-for="(i,index) in institutionArr" v-if="index < 4">
        <view class="item">
          <text class="flex-item item1">{{i.name}}</text>
          <text class="flex-item item2">
            <image src="../../static/site-icon.png" class="u-guest" />{{i.job}}</text>
        </view>
      </view>
    </view>
    <view class="g-section">
      <view class="m-sectionTtitle">
        <image src="../../static/news.png" class="u-guest" />
        <text class="u-sectionName">文创新闻</text>
        <navigator url="/pages/index/news" hover-class="navigator-hover" class="u-sectionMore">
          更多>
        </navigator>

      </view>
      <view class="m-newsList" v-for="(i,index) in newsData" @click='navigatorTo(i.article_url)' v-if="index < 8">
        <image v-if='i.thumbnail_url.match("847723")' src="../../static/cover.jpg" class="u-newsListImg" />
        <image v-else :src="i.thumbnail_url" class="u-newsListImg" />
        <text class="u-newsListTitle">{{i.title}}</text>
        <text class="u-newsTime">{{i.published_at}}</text>
      </view>
      <view class="m-hint" v-if="newsData.length==0">暂无数据</view>
    </view>
  </view>
</template>

<script lang="ts">
  import Vue from "vue";
  import searchInput from "@/components/searchInput.vue";
  import swiperBox from "@/components/swiperBox.vue";
  import { peopleArr, institutionArr, news } from "@/assets/js/data.js"
  export default Vue.extend({
    data() {
      return {
        newsData: [],
        peopleArr: peopleArr,
        institutionArr: institutionArr,
        news: news,
        flag: false
      };
    },
    components: {
      searchInput,
      swiperBox
    },
    onShow() {

      console.log("App Show");
    },
    onLoad() {

    },
    created() {
      console.log("run")

    },
    mounted() {
      let that = this;
      uni.request({
        url: 'https://www.nbd.com.cn/columns/1279/articles_list.json',
        method: 'GET',
        success: function (res) {
          console.log(res.data)
          that.newsData = res.data
        }

      })

    },
    methods: {
      navigatorTo(url) {
        uni.navigateTo({
          url: '/pages/index/webView?url=' + url,
        })

      },
    }

  });
</script>

<style lang="scss">
  .iframeSlide {
    width: 98%;
    height: 60upx;
  }

  .u-headImg {
    display: block;
    width: 100%;
    height: 240upx;
    border-radius: 10upx
  }

  .content {
    /* text-align: center; */
  }

  .u-guest-echart {
    width: 100%;
    height: 120upx;
  }

  .iframeTest {
    width: 100%;
    height: 600upx;
    margin: 30upx 0;
  }

  .logo {
    height: 200upx;
    width: 200upx;
    margin-top: 200upx;
  }

  .title {
    font-size: 36upx;
    color: #8f8f94;
  }

  .g-section {
    overflow: hidden;
    margin-bottom: 50upx;
  }

  .m-sectionTtitle {
    overflow: hidden;
    margin-bottom: 20upx;
  }

  .u-guest {
    height: 30upx;
    width: 25upx;
  }

  .u-sectionName {
    font-size: 33upx;
    color: #fff;
    margin-left: 15upx;
  }

  .u-sectionMore {
    font-size: 26upx;
    float: right;
    color: #ababac;
  }

  .m-guest {
    width: 335upx;
    height: 284upx;
    padding: 35upx 20upx;
    box-sizing: border-box;
    background: url("../../static/projectBg2.jpg");
    background-size: 100% 100%;
    border-radius: 15upx;
    float: left;

    &:nth-child(even) {
      float: right;
    }

    &:nth-child(5) {
      height: 224upx;
    }

    &:nth-child(4) {
      height: 224upx;
    }
  }

  .u-guestImg {
    width: 120upx;
    height: 120upx;
    border-radius: 50%;
    float: left;
  }

  .u-guestName {
    color: #ffffff;
    font-size: 24upx;
    margin-left: 135upx;
    display: block;
  }

  .u-guestPostion {
    color: #ffffff;
    font-size: 24upx;
    display: block;
    margin-top: 15upx;
    margin-left: 135upx;

  }

  .m-newsList {
    height: 220upx;
    background: url("../../static/projectBg2.jpg");
    background-size: 100% 100%;
    border-radius: 15upx;
    padding: 40upx 36upx;
    box-sizing: border-box;
    position: relative;
  }

  .u-newsListImg {
    max-width: 100%;
    width: 165upx;
    height: 124upx;
    border-radius: 15upx;
    float: left;
  }

  .u-newsListTitle {
    font-size: 30upx;
    color: #fff;
    line-height: 1.5;
    float: left;
    width: 430upx;
    margin-left: 20upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .m-hint {
    color: #fff;
    font-size: 16upx;
    text-align: center;
  }

  .u-newsTime {
    font-size: 22upx;
    color: #a5a7ad;
    position: absolute;
    left: 226upx;
    bottom: 40upx;
  }

  .m-institution {
    height: 100upx;
    margin: 0upx 0;

    .u-guest {
      vertical-align: middle;
      margin-right: 20upx;
    }



    .item {
      display: -webkit-flex !important;
      display: flex !important;
      width: 100%;
      color: #fff;
      font-size: 32upx;
      line-height: 20upx;
    }

    .item1 {
      -webkit-flex: 3;
      flex: 3;
      padding-left: 30upx;
    }

    .item2 {
      -webkit-flex: 1;
      flex: 1;
      padding-left: 30upx;
    }
  }

  .news-state {
    display: -webkit-flex !important;
    display: flex !important;
    margin: 30upx 0;

    .item1 {
      -webkit-flex: 1;
      flex: 1;
    }

    .item2 {
      -webkit-flex: 5;
      flex: 5;
      font-size: 30upx;
      color: #fff;

      view {
        margin-bottom: 10upx;
      }

      marquee {
        margin-top: 6upx;
        height: 70upx;
      }
    }
  }

  .u-newsImg {
    width: 70upx;
    height: 70upx;
  }
</style>